<template>
  <a-form layout="vertical">
    <a-form-item label="层级">
      <a-input-number class="w-full" v-model:value="currentComponent.style.zIndex"></a-input-number>
    </a-form-item>
    <a-form-item label="尺寸" name="width">
      <div class="flex align-center">
        <a-input-number class="flex-sub" v-model:value="width" />
        <span class="margin-lr-xs">x</span>
        <a-input-number class="flex-sub" v-model:value="height" />
      </div>
    </a-form-item>
    <a-form-item label="数据来源" name="pic">
      <a-radio-group v-model:value="currentComponent.data.source">
        <a-radio value="upload">上传</a-radio>
        <a-radio value="variable">变量</a-radio>
      </a-radio-group>
      <div class="margin-top-lg">
        <Variable
          v-if="currentComponent.data.source === 'variable'"
          :list="CertVariable"
          @on-click="handleInsertVariable"
        >
          <a-button class="w-full">
            插入变量
            <template #icon>
              <FontSizeOutlined class="text-12"></FontSizeOutlined>
            </template>
          </a-button>
        </Variable>

        <a-button v-else class="w-full">
          更换图片
          <template #icon>
            <UploadOutlined></UploadOutlined>
          </template>
        </a-button>
      </div>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { UploadOutlined, FontSizeOutlined } from '@ant-design/icons-vue'
import { useCertStore } from '@/stores'
import type { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import type DiyImage from '@/diy/config/DiyImage'
import { useDiyHooks } from '@/hooks/useDiyHooks'
import Variable from '@/components/Variable/index.vue'
import { CertVariable } from '@/diy/variable/cert'

const store = useCertStore()

const currentComponent: Ref<DiyImage> = storeToRefs(store).currentComponent as Ref<DiyImage>

const { generateStyleProp } = useDiyHooks(store)

const width = generateStyleProp('width')
const height = generateStyleProp('height')

//插入变量
const handleInsertVariable = (data: any) => {
  currentComponent.value.data.src = data.value
}
</script>

<style scoped></style>
